<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>维权力接口测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-section h3 {
            color: #333;
            margin-top: 0;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
        .success {
            border-color: #28a745;
            background-color: #d4edda;
        }
        .error {
            border-color: #dc3545;
            background-color: #f8d7da;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .login-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <h1>🛡️ 维权力接口测试页面</h1>
    
    <!-- 登录测试 -->
    <div class="test-section">
        <h3>1. 用户登录测试</h3>
        <div class="login-form">
            <input type="text" id="username" placeholder="用户名" value="testuser">
            <input type="password" id="password" placeholder="密码" value="123456">
            <button onclick="testLogin()">登录</button>
        </div>
        <div id="loginResult" class="result"></div>
    </div>

    <!-- AI接口测试 -->
    <div class="test-section">
        <h3>2. AI诊断接口测试</h3>
        <button onclick="testAiDiagnosisHistory()">获取诊断历史 (需要登录)</button>
        <button onclick="testAiDiagnosisTemplates()">获取诊断模板 (无需登录)</button>
        <button onclick="testAiStatistics()">获取统计信息 (无需登录)</button>
        <div id="aiResult" class="result"></div>
    </div>

    <!-- 社区接口测试 -->
    <div class="test-section">
        <h3>3. 社区接口测试</h3>
        <button onclick="testCommunityPosts()">获取帖子列表 (无需登录)</button>
        <button onclick="testCommunityPostDetail()">获取帖子详情 (无需登录)</button>
        <div id="communityResult" class="result"></div>
    </div>

    <!-- 模板接口测试 -->
    <div class="test-section">
        <h3>4. 模板接口测试</h3>
        <button onclick="testTemplateList()">获取模板列表 (无需登录)</button>
        <button onclick="testTemplateDetail()">获取模板详情 (无需登录)</button>
        <div id="templateResult" class="result"></div>
    </div>

    <!-- 服务状态 -->
    <div class="test-section">
        <h3>5. 服务状态</h3>
        <p><strong>后端服务:</strong> <a href="http://localhost:8080/api" target="_blank">http://localhost:8080/api</a></p>
        <p><strong>API文档:</strong> <a href="http://localhost:8080/api/swagger-ui.html" target="_blank">http://localhost:8080/api/swagger-ui.html</a></p>
        <p><strong>前端应用:</strong> <a href="http://localhost:3001" target="_blank">http://localhost:3001</a></p>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080/api';
        let authToken = '';

        // 通用请求函数
        async function makeRequest(url, options = {}) {
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    ...options.headers
                },
                ...options
            };

            if (authToken) {
                config.headers.Authorization = `Bearer ${authToken}`;
            }

            try {
                const response = await fetch(API_BASE + url, config);
                const data = await response.json();
                return {
                    status: response.status,
                    success: response.ok,
                    data: data
                };
            } catch (error) {
                return {
                    status: 0,
                    success: false,
                    error: error.message
                };
            }
        }

        // 显示结果
        function showResult(elementId, result) {
            const element = document.getElementById(elementId);
            element.textContent = JSON.stringify(result, null, 2);
            element.className = 'result ' + (result.success ? 'success' : 'error');
        }

        // 1. 登录测试
        async function testLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            const result = await makeRequest('/auth/login', {
                method: 'POST',
                body: JSON.stringify({ username, password })
            });

            if (result.success && result.data.data && result.data.data.token) {
                authToken = result.data.data.token;
                result.message = '登录成功，Token已保存';
            }

            showResult('loginResult', result);
        }

        // 2. AI接口测试
        async function testAiDiagnosisHistory() {
            const result = await makeRequest('/ai/diagnosis/history');
            showResult('aiResult', result);
        }

        async function testAiDiagnosisTemplates() {
            const result = await makeRequest('/ai/diagnosis/templates');
            showResult('aiResult', result);
        }

        async function testAiStatistics() {
            const result = await makeRequest('/ai/statistics/scenarios');
            showResult('aiResult', result);
        }

        // 3. 社区接口测试
        async function testCommunityPosts() {
            const result = await makeRequest('/community/posts/list?page=1&size=10');
            showResult('communityResult', result);
        }

        async function testCommunityPostDetail() {
            const result = await makeRequest('/community/posts/detail/1');
            showResult('communityResult', result);
        }

        // 4. 模板接口测试
        async function testTemplateList() {
            const result = await makeRequest('/templates/list?page=1&size=10');
            showResult('templateResult', result);
        }

        async function testTemplateDetail() {
            const result = await makeRequest('/templates/detail/1');
            showResult('templateResult', result);
        }

        // 页面加载时检查服务状态
        window.onload = function() {
            console.log('维权力接口测试页面已加载');
            console.log('请先测试登录功能，然后测试需要认证的接口');
        };
    </script>
</body>
</html>